<template>
  <div class="classify">
    <van-nav-bar title="分类" />
    <div class="content">
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item title="乳饮酒水" />
        <van-sidebar-item title="粮油速食" />
        <van-sidebar-item title="休闲零食" />
        <van-sidebar-item title="生鲜蔬菜" />
        <van-sidebar-item title="调味调料" />
      </van-sidebar>
      <!-- 二级分类展示 -->
      <div class="right">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="value in curCategory"
            :key="value.id"
            @click="openCategory(value)"
          >
            <van-image :src="value.img" />
            <div>{{ value.title }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import img1 from '@/assets/images/category/milk.jpg'
import img2 from '@/assets/images/category/drinks.png'
import img3 from '@/assets/images/category/brew.jpg'
import img4 from '@/assets/images/category/greenTea.png'
import img5 from '@/assets/images/category/fbss.png'
import img6 from '@/assets/images/category/syy.png'
import img7 from '@/assets/images/category/wgzl.png'
import img8 from '@/assets/images/category/mfmt.png'
import img9 from '@/assets/images/category/bggd.png'
import img10 from '@/assets/images/category/jg.png'
import img11 from '@/assets/images/category/rlsp.png'
import img12 from '@/assets/images/category/sgsc.jpg'
import img13 from '@/assets/images/category/rd.png'
import img14 from '@/assets/images/category/hxsc.png'
import img15 from '@/assets/images/category/twtl.png'
import img16 from '@/assets/images/category/gc.jpg'

const router = useRouter()
const active = ref(0)
const category = reactive([
  [
    {
      img: img1,
      id: '1',
      title: '牛奶'
    },
    {
      img: img2,
      id: '2',
      title: '茶叶'
    },
    {
      img: img3,
      id: '3',
      title: '饮料'
    },
    {
      img: img4,
      id: '4',
      title: '酒水'
    }
  ],
  [
    {
      img: img5,
      id: '5',
      title: '方便速食'
    },
    {
      img: img6,
      id: '6',
      title: '食用油'
    },
    {
      img: img7,
      id: '7',
      title: '五谷杂粮'
    },
    {
      img: img8,
      id: '8',
      title: '米粉面条'
    }
  ],
  [
    {
      img: img9,
      id: '9',
      title: '饼干糕点'
    },
    {
      img: img10,
      id: '10',
      title: '坚果果干'
    },
    {
      img: img11,
      id: '11',
      title: '肉类零食'
    }
  ],
  [
    {
      img: img12,
      id: '12',
      title: '水果蔬菜'
    },
    {
      img: img13,
      id: '13',
      title: '肉蛋'
    },
    {
      img: img14,
      id: '14',
      title: '海鲜水产'
    }
  ],
  [
    {
      img: img15,
      id: '15',
      title: '调味调料'
    },
    {
      img: img16,
      id: '16',
      title: '干菜'
    }
  ]
])
const curCategory = ref(category[0])
const onChange = (index) => {
  console.log(index)
  curCategory.value = category[index]
}

const openCategory = (value) => {
  console.log(value)
  router.push({
    name: 'List',
    query: {
      id: value.id,
      title: value.title
    }
  })
}
</script>

<style lang="less" scoped>
/deep/ .van-sidebar-item--select:before {
  background-color: #1ba784;
}
.content {
  display: flex;
  height: 100%;
  .right {
    flex: 1;
    padding: 0 10px;
  }
}
</style>
